<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Gnatoo</title>

<link href="style.css" rel="stylesheet" type="text/css" />
	
<link href="jslibraries/jquery/css/smoothness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css" />

<link href="css/examples/tables/bluetablesorter/style.css"
	rel="stylesheet" type="text/css" />
<link href="css/examples/tabs/simple.css" rel="stylesheet" type="text/css" />
<link href="css/examples/trees/simple.css"
	rel="stylesheet" type="text/css" />

<script type="text/javascript" src="jslibraries/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.layout.js"></script>
<script type="text/javascript" src="jslibraries/jquery/jquery.simplemodal-1.4.1.js"></script>

<script type="text/javascript" src="gnatoo/gnatoo.js"></script>

<script type="text/javascript" src="jslibraries/data/BaseListDataProvider.js"></script>
<script type="text/javascript" src="jslibraries/data/TreeDataProvider.js"></script>

</head>

<body>
<form>

<script type="text/javascript">
var Selectbox = {	
		staticSelection : '0',
		staticSelectionWithOnchange : '0',

		selectedColor : 'green',
		colors : [ {id : 'red', label : 'red'},
		    		{id : 'green', label : 'green'},
		    		{id : 'black', label : 'black'}  ]
};
</script>
<div id="Selectbox" >
<script type="text/html">
<div>
	<b>Static select, press the submit button to update the model:</b>
 	<select value="#{.Selectbox.staticSelection}">
		<option value="0">option 0</option>
		<option value="1">option 1</option>
		<option value="2">option 2</option>
	</select>
	<span>#{.Selectbox.staticSelection}</span>
	<button type="button" onclick="#{.Selectbox.test()}">submit</button>
	<br />
	
	<b>Same static select, but with 'onchange' event handler:</b>
 	<select value="#{.Selectbox.staticSelectionWithOnchange}" onchange="#{.Selectbox.test()}">
		<option value="0">option 0</option>
		<option value="1">option 1</option>
		<option value="2">option 2</option>
	</select>
	<span>#{.Selectbox.staticSelectionWithOnchange}</span>
	<br />
	<br />
	<b>Dynamic select, also with 'onchange' event handler:</b>
 	<select value="#{.Selectbox.selectedColor}" onchange="#{.Selectbox.test()}">
		<loop value="#{.Selectbox.colors}" var="color">
			<option value="#{.color.id}" 
				selected="#{.color.id == .Selectbox.selectedColor}">#{.color.label}</option>
		</loop>
	</select>
	<span style="color:#{.Selectbox.selectedColor}">#{.Selectbox.selectedColor}</span>
</div>
</script>
</div>
<script>
$(document).ready( function() { 
	// init context
	var gnatooContext = window.gnatoo.initByName('Selectbox'); 
	// bind model
	gnatooContext.data['Selectbox'] = Selectbox;
	// render
	gnatooContext.render();
});
</script>


<!-- <jsp:include page="tutorials/Tables/Treetable/Treetable.html"
	flush="false"></jsp:include>
 -->

</form>
<pre id="mylog" style="font-size: 1.0em; display : block"></pre>
</body>
</html>


